<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>=====教育SDK开发者DEMO===</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="libs/thirdpart/elementui/index.css">
  <link rel="stylesheet" href="styles/style.css">
  <script src="libs/thirdpart/vue.js"></script>

  <!-- 引入组件库 -->
  <script src="libs/thirdpart/elementui/index.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #app_box {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .title {
      margin: 10px 0;
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    .promption {
      color: #A0A0A0
    }

    .im-log-box {
      width: 100%;
      height: 100%;
      border: 1px solid #999;
      margin: 0px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .im-log-box li {
      margin: 2px 5px;
      font-size: 14px;
      color: #666;
    }

    #video_wrap {
      height: 100px;
      display: flex;
    }

    #video_wrap>div {
      width: 134px;
      height: 100%;
    }

    #paint_box {
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px solid #888;
      overflow: hidden;
      box-sizing: border-box;
    }

    .el-header,
    .el-footer {
      padding: 0 !important;
    }

    .el-main {
      padding: 0 !important;
      overflow: hidden !important;
      height: 100%;
    }

    .el-container {
      height: 100%;
      overflow: hidden;
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-icon-arrow-left,
    .el-icon-arrow-right {
      font-size: 20px;
    }

    .version-info {
      font-size: 14px;
      color: #606266;
    }
  </style>


</head>

<body>
  <div id="app_box" class="container-fluid">
    <div class="header flex flex-align-center">
      <div class="logo"></div>
      <div class="title">英语在线学习</div>
    </div>
    <el-container style="display: none;" v-show="isShow">

      <!--左边栏  -->
      <el-aside width="300px">

        <!-- 左边栏 用户登录和登出 -->
        <el-row>
          <el-col>
            <el-tabs type="border-card">
              <el-tab-pane label="账号">
                <el-form ref="form" label-width="80px" size="mini">
                  <el-form-item label="用户名">
                    <el-select :disabled="status >= STATUS_LOGINED" v-model="account" placeholder="请选择帐号">
                      <el-option v-for="user in users" v-bind:value="user.userId" v-text="user.userId"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="start" :disabled="status >= STATUS_LOGINED" v-text="'登录'"></el-button>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="logout" :disabled="status < STATUS_LOGINED" v-text="'登 出'"></el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>

          </el-col>
        </el-row>

        <!--左边栏  房间进入和退出 -->

        <el-row>
          <el-col>
            <el-tabs type="border-card">
              <!--右边栏 涂鸦操作 -->
              <el-tab-pane label="课堂">
                <el-form ref="form" label-width="80px" size="mini">

                  <el-form-item label="课堂号">
                    <el-input id="roomid" v-model.trim="roomID" placeholder="课堂ID"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="createClassroom" :disabled="status < STATUS_LOGINED || status == STATUS_INCLASS"
                      v-text="'创建房间'"></el-button>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="destroyClassroom" :disabled="status < STATUS_LOGINED" v-text="'销毁房间'">
                    </el-button>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="joinClassroom" :disabled="status < STATUS_LOGINED || status == STATUS_INCLASS"
                      v-text="'进入房间'"></el-button>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="quitClassroom()" :disabled="status < STATUS_LOGINED" v-text="'退出房间'">
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-tabs type="border-card" class="version-info">
              <!--左边栏 版本 -->
              <el-tab-pane label="版本">
                <p v-text="'Board: ' + TEduBoard.getVersion() "></p>
                <p v-text="'WebRTC: ' + TRTC.VERSION"></p>
                <p v-text="'IM: 1.7.1'"> </p>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>


      </el-aside>

      <!--中间部分  -->
      <el-main>

        <el-container>

          <!--中间区  视频区 -->
          <el-header style="height: 100px">
            <el-container>
              <el-header style="height: 42px;">
                <el-button plain @click="startRTC" type="button" :disabled="status < STATUS_INCLASS" v-text="'摄像头推流'"
                  size="mini"></el-button>
                <el-button plain @click="pushScreen" :disabled="status < STATUS_INCLASS" v-text="'屏幕分享'" size="mini">
                </el-button>
                <el-button @click="stopPush" v-if="isPushing === 1" size="mini">停止推流</el-button>

                <template v-if="isPushing === 1">
                  <el-button @click="toggleCamera" size="mini">{{enableCamera ? '关闭': '打开'}}摄像头/屏幕分享</el-button>
                  <el-button @click="toggleMic" size="mini">{{enableMic ? '关闭': '打开'}}麦克风</el-button>
                </template>
              </el-header>
              <el-main>
                <div id="video_wrap"></div>
              </el-main>
            </el-container>
          </el-header>

          <!--中间  白板区 -->
          <el-main>
            <el-container>
              <el-header style="height: 42px;">
                <el-tabs size="mini" v-model="currentFileId" closable type="card" @tab-remove="onDeleteFileById"
                  @tab-click="onClickBoardTab">
                  <el-tab-pane size="mini" :key="file.fid" v-for="file in fileInfoList" :label="file.title"
                    :name="file.fid">
                  </el-tab-pane>
                </el-tabs>
              </el-header>
              <el-main>
                <div id="paint_box" style="background-color: rgb(240, 240, 240);"></div>
              </el-main>
              <el-footer style="height: 80px;">
                <div style="text-align: center; padding-top: 30px; color: gray;" v-if="thumbUrls.length == 0">此文件不支持缩略图</div> 
                <div style="overflow-x: scroll visible; overflow-y:hidden; white-space:nowrap; height:inherit; ">
                    <img style="height: 100%; margin-right: 3px;" v-for="(item, index) in thumbUrls" :name="index" :src="item" v-on:click="onThumbClick(index)"><img>
                </div>
              </el-footer>
            </el-container>
          </el-main>


          <!--中间区  信息区 -->
          <el-footer style="height: 200px;margin-top: 1px;">
            <el-container>
              <el-main>
                <ul id="msg_box" class="im-log-box">
                  <li v-for="msg in msgs">
                    <span class="send">{{msg.time}}</span>
                    <span class="send">{{msg.send}}</span>
                    <span class="content">{{msg.content}}</span>
                  </li>
                </ul>
              </el-main>
              <el-footer style="margin-top: 5px;">
                <el-row>
                  <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="消息内容">
                      <el-input v-model="imMsg.common.data" placeholder="text消息"></el-input>
                    </el-form-item>
                    <el-form-item label="接收人ID">
                      <el-input v-model="imMsg.common.toUser" placeholder="不填表示给群组发消息"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="sendMsg">发送消息</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
              </el-footer>
            </el-container>
          </el-footer>

        </el-container>
      </el-main>

      <!--右边栏  -->
      <el-aside width="340px">
        <el-tabs type="border-card">

          <!--右边栏 涂鸦操作 -->
          <el-tab-pane label="涂鸦">

            <el-form ref="form" label-width="100px" size="mini">
              <el-form-item>
                <el-checkbox @change="onSetDrawEnable" v-model.boolean="drawEnable">允许涂鸦</el-checkbox>
              </el-form-item>

              <el-form-item>
                <el-button @click="onUndo" :disabled="canUndo == 0" v-text="'撤销'"></el-button>
                <el-button @click="onRedo" :disabled="canRedo == 0" v-text="'重做'"></el-button>
              </el-form-item>

              <el-form-item label="清除操作">
                <el-button @click="onclearDraws" v-text="'清空涂鸦'"></el-button>
                <el-button @click="onClear" v-text="'清空白板'"></el-button>
              </el-form-item>

              <el-form-item label="涂鸦工具">
                <el-select placeholder="工具" v-model="toolType" @change="onSetToolType">
                  <el-option label="鼠标" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_MOUSE"></el-option>
                  <el-option label="画笔" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_PEN"></el-option>
                  <el-option label="直线" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LINE"></el-option>
                  <el-option label="实心(椭)圆" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_OVAL_SOLID">
                  </el-option>
                  <el-option label="空心(椭)圆" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_OVAL"></el-option>
                  <el-option label="实心矩形" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT_SOLID">
                  </el-option>
                  <el-option label="空心矩形" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT"></el-option>
                  <el-option label="文字输入" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_TEXT"></el-option>
                  <el-option label="橡皮擦" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ERASER"></el-option>
                  <el-option label="激光笔" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LASER"></el-option>
                  <el-option label="框选" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT_SELECT"></el-option>
                  <el-option label="点选" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_POINT_SELECT">
                  </el-option>
                  <el-option label="移动" v-bind:value="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ZOOM_DRAG"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="画笔颜色">
                <el-color-picker @active-change="onSetBrushColor" v-model="brushColor" size="mini"></el-color-picker>
              </el-form-item>

              <el-form-item label="背景颜色">
                <el-color-picker @active-change="onSetBackgroudColor" v-model="backgroundColor" size="mini">
                </el-color-picker>
              </el-form-item>

              <el-form-item label="字体颜色">
                <el-color-picker @active-change="onSetTextColor" v-model="textColor" size="mini"></el-color-picker>
              </el-form-item>

              <el-form-item label="字体大小">
                <el-slider @change="onSetTextSize" v-model="textSize" max='500'></el-slider>
              </el-form-item>

              <el-form-item label="画笔粗细">
                <el-slider @change="onSetThin" v-model="brushThin" max='500'></el-slider>
              </el-form-item>

              <el-form-item label="白板缩放">
                <el-slider @change="onSetScale" v-model="scaleSize" max='300'></el-slider>
              </el-form-item>

              <el-form-item label="设置背景">
                <el-select placeholder="工具" v-model="backgroundImage" @change="onSetBackgroundImage">
                  <el-option label="美图1"
                    v-bind:value="'https://main.qcloudimg.com/raw/36d31e0d6f9d24a9b5727ab5e21b4b8c.jpg'"></el-option>
                  <el-option label="美图2"
                    v-bind:value="'https://main.qcloudimg.com/raw/a748528fecffd13a466a3a6c23ad1f45.jpg'"></el-option>
                  <el-option label="美图3"
                    v-bind:value="'https://main.qcloudimg.com/raw/5e3f50336b85071ef09affcd967e679d.jpg'"></el-option>
                  <el-option label="美图4"
                    v-bind:value="'https://main.qcloudimg.com/raw/4a897d60a49ae211f6e492f6ebe8340f.jpg'"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="设置H5背景">
                <el-select placeholder="工具" v-model="backgroundImageH5" @change="onSetBackgroundH5">
                  <el-option label="QQ" v-bind:value="'https://www.qq.com/'"></el-option>
                  <el-option label="腾讯云" v-bind:value="'https://cloud.tencent.com'"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="添加图片资源">
                  <el-select placeholder="图片url"  @change="onAddImageElement">
                    <el-option label="腾讯云" v-bind:value="'https://tic-res-1259648581.cos.ap-shanghai.myqcloud.com/demo/qcloud.jpg'"></el-option>
                  </el-select>
                </el-form-item>
            </el-form>

          </el-tab-pane>

          <!--右边栏 白板操作 -->
          <el-tab-pane label="白板">
sdfsdf 
            <el-form ref="form" label-width="100px" size="mini">

              <el-form-item label="白板信息">
                <p>总页数：{{boardData.total}}, 当前页：{{boardData.current}} </p>
              </el-form-item>

              <el-form-item label="前后翻页">
                <el-button @click="prevBoard" v-text="'前一页'"></el-button>
                <el-button @click="nextBoard" v-text="'后一页'"></el-button>
              </el-form-item>

              <el-form-item label="上下一步">
                <el-button @click="prevStep" v-text="'上一步'"></el-button>
                <el-button @click="nextStep" v-text="'下一步'"></el-button>
              </el-form-item>

              <el-form-item label="新增白板">
                <el-button @click="addBoard" v-text="'新增白板'"></el-button>
              </el-form-item>

              <el-form-item label="跳转白板">
                <el-select @change="onGotoBoard" placeholder="跳转" v-model="boardData.currentBoardId">
                  <el-option v-for="item in boardData.boardIdlist" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>

              <el-form-item label="删除白板">
                <el-select @change="onDeleteBoard" placeholder="删除">
                  <el-option v-for="item in boardData.boardIdlist" :key="item" :label="item" :value="item" />
                </el-select>
                <p class="promption">说明：缺省白板页和PPT白板页不能删除</p>
              </el-form-item>

            </el-form>

          </el-tab-pane>


          <!--右边栏 文件操作 -->
          <el-tab-pane label="文件">
            <el-form ref="form" label-width="100px" size="mini">
              <el-form-item label="新增本地PPT">

                <input id="file_input" type="file" @change="uploadFile"
                  accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint, application/vnd.ms-excel">
              </el-form-item>

              <el-form-item label="新增视频文件">
                <el-select placeholder="视频文件" @change="onAddVideoFile">
                  <el-option label="腾讯教育"
                    v-bind:value="'https://tic-res-1259648581.cos.ap-shanghai.myqcloud.com/demo/tiw-vod.mp4'">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="新增H5网页">
                <el-select placeholder="H5网页地址" @change="onAddH5File">
                  <el-option label="腾讯云互动课堂"
                      v-bind:value="'https://cloud.tencent.com/solution/tic'">
                  </el-option>
                  <el-option label="腾讯云官网"
                    v-bind:value="'https://cloud.tencent.com/'">
                  </el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="切换文件">
                <el-select @change="onSwitchFile" placeholder="切换">
                  <el-option v-for="file in fileInfoList" :key="file.fid" :label="file.title" :value="file" />
                </el-select>
              </el-form-item>

              <el-form-item label="删除文件">
                <el-select @change="onDeleteFile" placeholder="删除">
                  <el-option v-for="file in fileInfoList" :key="file.fid" :label="file.title" :value="file" />
                </el-select>
                <p class="promption">说明：缺省文件不能删除</p>
              </el-form-item>

            </el-form>

          </el-tab-pane>


        </el-tabs>

      </el-aside>

    </el-container>

  </div>

  <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>

  <!-- AXIOS SDK 白板SDK依赖axios（后续版本会去掉该依赖） -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/axios/axios.min.js"></script>

  <!-- WebRTC SDK -->
  <!-- <script src="https://sqimg.qq.com/expert_qq/webrtc/3.4.2/WebRTCAPI.min.js"></script> -->
  <script src="./libs/trtc.js"></script>
  <!-- WebIM SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/webim/webim.min.js"></script>

  <!-- COS SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/cos/5.1.0/cos.min.js"></script>

  <!-- 白板SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/board/2.4.0/TEduBoard.min.js"></script>
  <!-- <script src="libs/TEduBoard.min.js"></script> -->

  <!-- TIC SDK 可根据开源代码自行编译TIC-->
  <script src="https://resources-tiw.qcloudtrtc.com/tic/2.4.1/TIC.min.js"></script>
  <!-- <script src="libs/TIC.js"></script> -->

  <script src="libs/thirdpart/purl.js"></script>
  <script src="libs/thirdpart/vconsole.min.js"></script>
  <script src="js/account_dev.js"></script>
  <!-- <script src="account/1400162216.js"></script>
  <script src="account/1400189148.js"></script> -->
  <script src="js/main.js"></script>

  <script>
    if (location.href.indexOf('dev') > -1) {
      var vConsole = new VConsole();
    }
  </script>
</body>

</html>